<template>
  <div class="tag-box">
    <span class="left">{{ tagitem.name }}:</span>
    <span
      v-for="(item, index) in tagitem.tags"
      :key="index"
      class="tag-item"
      @click="handleClick(item.tagname,tagitem.name,item.type)"
    >
      <span>|</span>
      <span class="tag" :class="{active:(currentTag==item.tagname)}">{{ item.tagname }}</span>
    </span>
  </div>
</template>

<script>
export default {
  name: "Singertags",
  data(){
      return{
          currentTag: this.tagitem.tags[0].tagname
      }
  },
  props: {
    tagitem: { type: Object },
  },
  methods: {
    handleClick(tag,tagtype,type) {
    //   console.log(tag);
      this.currentTag = tag;
      this.$emit('selectTag',type, tagtype);
    },
  },
};
</script>

<style scoped lang="less">
.tag-box {
  margin-top: 15px;
  user-select: none;
  .left {
    margin-right: 20px;
  }

  .tag-item {
      margin-right: 10px;
    .tag {
      cursor: pointer;
      margin-left: 5px;
    }
    .tag:hover {
      background-color: skyblue;
    }
    .active{
        background-color: salmon;
    }
  }
}
</style>